<template>
  <el-card>
    <SearchForm />
    <el-button type="primary" @click="openForm" style="margin-bottom: 20px"
      >新增渠道</el-button
    >
    <el-table :data="tableData" row-key="name">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="name" label="渠道名" width="220" />
      <el-table-column prop="type" label="业务类型" />
      <el-table-column prop="platform" label="资源平台" />
      <el-table-column prop="policy" label="合作政策" />
      <el-table-column prop="frame" label="有无框架">
        <template #default="{ row }">
          {{ row.frame ? "有" : "无" }}
        </template>
      </el-table-column>
      <el-table-column prop="contract" label="合同附件">
        <template #default="{ row }">
          <el-link v-if="row.contract" href="天价合同.pdf" target="_blank">{{
            row.contract
          }}</el-link>
          <template v-else>/</template>
        </template></el-table-column
      >
      <el-table-column prop="time" label="合同时效" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="maintenanceMan" label="渠道维护人" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" @click="openUpdate(row)">更新</el-button>
        </template>
      </el-table-column>
    </el-table>
    <ModalForm v-model="visible" :initValue="initValue" />
  </el-card>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import ModalForm from "./components/ModalForm.vue";
import { Channel } from "./components/ModalForm.vue";
import SearchForm from "./components/SearchForm.vue";
const visible = ref(false);
const openForm = () => {
  initValue.value = undefined;
  visible.value = true;
};
const initValue = ref<Channel | undefined>(undefined);
const openUpdate = (row: Channel) => {
  initValue.value = { ...row };
  visible.value = true;
};
const tableData = ref([
  {
    name: "北京恒亦文化有限公司",
    type: "KOL",
    platform: "小红书",
    policy: "含税",
    frame: true,
    contract: "py合同",
    time: "2021-12-22",
    remark: "123",
    maintenanceMan: "刘合森",
  },
  {
    name: "深圳蜂群文化传媒有限公司",
    type: "KOL",
    platform: "小红书",
    policy: "含税",
    frame: true,
    contract: "",
    time: "2021-12-22",
    remark: "456",
    maintenanceMan: "刘合森",
  },
  {
    name: "深圳市宸扬文化传播有限公司",
    type: "KOL",
    platform: "小红书",
    policy: "含税",
    frame: true,
    contract: "",
    time: "2021-12-22",
    remark: "789",
    maintenanceMan: "刘合森",
  },
]);
</script>
